<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pdf模拟测试</title>
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            display: flex;
        }
        .container {
            width: 50%; /* 左侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
        }
        .sidebar {
            width: 50%; /* 右侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
            display: none;
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 这里放你的原始内容 -->
    <div style="height: 80px">
        <h3>测试服务器ip： 223.70.139.221</h3>
        <h3>测试服务器端口： 8888;</h3>
        <hr>
    </div>
    <div class="layui-btn-container">
        <h3 style="color: red">``` 基于坐标定位的 PDF 签章门面签章:</h3><br>

        <!-- HTML部分 -->
        <form id="pdfForm"  enctype="multipart/form-data">
            <h4>服务器印章编号<span style="color: red">（必填）</span></h4>
            <input type="text" name="Server_seal_number" value="60465486508A6DE5"  id="Server_seal_number" placeholder="" style="width: 300px" class="layui-input">
            <h4>签名策略编号<span style="color: red">（必填）</span></h4>
            <input type="text" name="Signature_policy_number" value="64F9EEA6ABB10702" id="Signature_policy_number" placeholder="" style="width: 300px" class="layui-input">
            <h4>时间戳签名策略（策略使用算法要和签名策略算法保持一致）</h4>



            <input type="text" name="Timestamp_policy_number"  value="1820FC8AA017784" id="Timestamp_policy_number" placeholder="可选" style="width: 300px" class="layui-input">
            <div class="layui-btn layui-btn-normal" >
                <input type="radio" name="aaa" value="指定页码"  checked onchange="showSpecificPage()">指定页码
                <input type="radio" name="aaa" value="页码范围"   onchange="showPageRange()">页码范围
            </div>
           <div id="qianzhangyema" style="display: block">
               <h4>签章页码<span style="color: red">（必填）</span></h4>
               <input type="text" name="pageno"  value="2" id="pageno" placeholder="可选" style="width: 300px" class="layui-input">
           </div>

            <div id="pageRangeContainer" style="display: none;">
            <h4>签章页码范围<span style="color: red">（必填）</span></h4>
            <span>起始页</span>
            <input type="text" name="pageStart"  value="2" id="pageStart" placeholder="" style="width: 300px" class="layui-input">
            <span>结束页</span>
            <input type="text" name="pageEnd"  value="4" id="pageEnd" placeholder="" style="width: 300px" class="layui-input">
            </div>



            <h4>签章坐标<span style="color: red">（必填）（0.0.0.0）为隐藏签章</span></h4>


            <div>
                <span>上端<input type="text" name="top"  value="100" id="top" placeholder="" style="width: 300px" class="layui-input"></span>
                <span>下端<input type="text" name="bottom"  value="100" id="bottom" placeholder="" style="width: 300px" class="layui-input"></span>
                <span>左端<input type="text" name="left"  value="100" id="left" placeholder="" style="width: 300px" class="layui-input"></span>
                <span>右端<input type="text" name="right"  value="300" id="right" placeholder="" style="width: 300px" class="layui-input"></span>

            </div>
            <h4>选择pdf文件</h4>
            <input type="file"  id="fileInput"  name="file" class="layui-btn demo-class-accept">
            <input type="button"  value="提交" id="submitButton" onclick=" check()" class="layui-btn demo-class-accept">
            <input type="button"  value="下载签章文档" id="downloadButton" onclick=" download()" class="layui-btn demo-class-accept">

        </form>

        <div class="layui-btn-container">

            <button id="showPopupButton" class="layui-btn layui-btn-normal">点击查看另一条规则</button><br>
            <span style="color: red">后端已经配置配置了一条规则，上述信息填完后相当于配置2个规则</span><br><br><br>
            <span style="color: red">指定页码和页码范围不能在同一个签章规则中同时使用，混用的话，需创建2个签章规则即可（经测试，一个规则中混用下会以指定页码为准）</span>
        </div>
        <div style="height: 80px">
            <!-- ... -->
        </div>
    </div>
</div>
<div class="sidebar" id="sidebarContent">
    <div class="layui-form">

        <hr class="ws-space-16">
        <textarea name="" placeholder="多行文本框" class="layui-textarea" style="height: 300px">
        SignRuleBean signRuleBean2=new SignRuleBean();
        String tssCertSN2 ="1820FC8AA017784";//时间戳签名策略
        String certSN2 = "5CEB9AA24A242D6C";//签名策略编号
        String serverSealNum2 = "619F6EF2AD6B4FEB";//服务器印章编号
        RectangleBean rectangleBean2 = new RectangleBean();
        rectangleBean2.setTssCertSN(tssCertSN2);
        rectangleBean2.setServerSealNum(serverSealNum2);
        rectangleBean2.setCertSN(certSN2);
        rectangleBean2.setPageNo(1);
        rectangleBean2.setLeft(100f);
        rectangleBean2.setTop(100f);
        rectangleBean2.setRight(100f);
        rectangleBean2.setBottom(100f);
        signRuleBean2.setRectangleBean(rectangleBean2);//坐标定位对象
        signRuleBeanList.add(signRuleBean2);
        </textarea>
    </div>
    <br>
        <button id="closeSidebarButton" class="layui-btn layui-btn-sm">关闭</button>
    </div>

<!-- JavaScript部分 -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>



  <script>

      function showSpecificPage() {
          console.log("选择了指定页码")

          document.getElementById("pageStart").value = "";
          document.getElementById("pageEnd").value = "";
          document.getElementById('pageRangeContainer').style.display = 'none';
          document.getElementById('qianzhangyema').style.display = 'block';
      }

      function showPageRange() {
          console.log("选择了页码范围")
          document.getElementById("pageno").value = "";
          document.getElementById('pageRangeContainer').style.display = 'block';
          document.getElementById('qianzhangyema').style.display = 'none';
      }


      const showPopupButton = document.getElementById('showPopupButton');
      const sidebarContent = document.getElementById('sidebarContent');
      const closeSidebarButton = document.getElementById('closeSidebarButton');

      showPopupButton.addEventListener('click', () => {
          sidebarContent.style.display = 'block';
      });

      closeSidebarButton.addEventListener('click', () => {
          sidebarContent.style.display = 'none';
      });
      // 生成随机字符串
      function generateRandomString(length) {
          const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
          let randomString = '';
          for (let i = 0; i < length; i++) {
              const randomIndex = Math.floor(Math.random() * characters.length);
              randomString += characters.charAt(randomIndex);
          }
          return randomString;
      }
function download(){

// 生成随机文件名
    const randomFileName = generateRandomString(24) + '.pdf';
    let that = this;
    this.loading = true;
    var xhr = new XMLHttpRequest(); // 用这种原生请求下载后端返回的二进制流打开就不会出现空白
    xhr.open(
        "get",
        "/downloadpoistionpdf",
        true
    );
    xhr.responseType = "blob";
    xhr.onload = function() {
        that.loading = false;
        const url = window.URL.createObjectURL(this.response);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", randomFileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };
    xhr.send();




}
           function check() {
               var serverSealNumber = $("#Server_seal_number").val();

               var signaturePolicyNumber = $("#Signature_policy_number").val();
               var timestampPolicyNumber = $("#Timestamp_policy_number").val();
               var fileInput = $("#fileInput");
               if (serverSealNumber === "" || signaturePolicyNumber === "" ) {
                   alert(".服务器印章编号-签名策略编号-时间戳签名策略,未全部填写");
                   return false;
               }


               if (fileInput.get(0).files.length === 0) {
                   alert("未选择文件");
                   return false;
               }

               var formData = new FormData($("#pdfForm")[0]);
               $.ajax({
                   url: "/poistionpdf",
                   type: "POST",
                   data: formData,
                   processData: false,
                   contentType: false,
                   success: function(response) {

                      if(response.code==200){
                          layer.open({
                              title: '提示',
                              content: "签章成功",
                          });
                      }
                      else {
                          layer.open({
                              title: '提示',
                              content:response.msg ,
                          });
                      }


                   },
                   error: function(xhr, status, error) {
                       // Handle error response from the server
                       alert("An error occurred: " + error);
                   }
               });
           }








    </script>


</body>
</html>